<template>
  <div>
    <!-- 列表页面 -->
    <!-- 编辑页面 -->
    <candidate-modify @editClose="editClose" :editcandidateId="editcandidateId"></candidate-modify>
    <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog{{dialogFormVisible}}</el-button> -->

  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
// import { ElMessageBox, ElMessage } from 'element-plus'
import candidateModel from '@/model/candidate'
import candidateModify from './detail'
export default {
  components: {
    candidateModify,
  },
  props:['editcandidateId'],
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
          // return (time.getTime() < this.setTimeForm.openDate || time.getTime() < Date.now())
        },
      },
      searchMenu: {
        name: "请筛选",
        state: "请筛选",
        minsalary: "请筛选",
        maxsalary: "请筛选",
        HR: "请筛选",
      },
      options: [
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
        {
          value: '选项1',
          label: '待筛选',
        },
        {
          value: '选项2',
          label: '待面试',
        },
        {
          value: '选项3',
          label: '待offer',
        },
        {
          value: '选项4',
          label: '待录用',
        },
        {
          value: '选项5',
          label: '已入职',
        },
      ],
      value: '',
      value2: "",
      // editcandidateId:'',
      candidates:[],//候选人列表
      total:0,//候选人总数
      dialogFormVisible:false,//弹出框显示
      formLabelWidth:'60px',//标题宽度
      loading:false,
      showEdit:false,

    };
  },
  mounted() {
    this.init()
  },
  methods: {
    handleCommand(command) {
      this.searchMenu.HR = command
    },
    handleClick() {
      // eslint-disable-next-line
      alert('button click')
    },
    // 执行获取数据等初始化动作
    init() { },
  },
  setup() {
    const candidates = ref([])//候选人列表
    const total = ref(0)//候选人总数
    const dialogFormVisible = ref(false)//弹出框显示
    const formLabelWidth = ref('60px')//标题宽度
    const editcandidateId = ref()
    const loading = ref(false)
    const showEdit = ref(false)
    const dialogNmae = ref()//弹框数据
    const dialogPosition = ref()
    const dialogTel = ref()
    const dialogSalary = ref()
    const remark = ref()
    const radio = ref(1)
    onMounted(() => {
      getcandidates()
    })

    const getcandidates = async () => {
      try {
        loading.value = true
        candidates.value = await candidateModel.getcandidates()
        total.value = candidates.value.length
        loading.value = false
      } catch (error) {
        loading.value = false
        if (error.code === 10020) {
          candidates.value = []
        }
      }
    }

    const handleEdit = id => {
      showEdit.value = true
      console.log(id);
      editcandidateId.value = id
    }
    const handleDelete = row => {
      dialogNmae.value = row.name
      dialogPosition.value = row.position
      dialogTel.value = row.tel
      dialogSalary.value = row.salary
      dialogFormVisible.value = true
    }

    const editClose = () => {
      showEdit.value = false
      getcandidates()
    }

    const indexMethod = index => index + 1

    return {
      dialogFormVisible,
      formLabelWidth,
      candidates,
      loading,
      showEdit,
      editClose,
      handleEdit,
      editcandidateId,
      indexMethod,
      handleDelete,
      dialogNmae,
      dialogSalary,
      dialogTel,
      dialogPosition,
      remark,
      radio,
      total,
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .dialog-box {
    text-align: center;
    padding: 0 80px;
  }

  .dialog-title {
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 10px;
    color: #f4516c;

  }

  .dialog-text {
    display: flex;
    flex-wrap: wrap;
    text-align: start;

    .dialog-i {
      width: 50%;
      line-height: 24px;
      height: 24px;
      margin: 10px 0;
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

.select-group {
  display: flex;

  .select-box {
    width: 30%;
    height: 24px;
    line-height: 24px;
    margin-bottom: 20px;

    .down-title {
      padding: 0 10px;
    }

    .down-div {
      border: 2px solid #007aff;
      border-radius: 4px;
      margin: 0;
      padding: 0;

      .down-dropdown {
        height: 24px;
        padding-left: 10px;
        line-height: 24px;

      }
    }
  }

}
</style>
